<template>
    <div class="rule" v-show="curPageShow">
        <div class="rule_button animated tada">
            <img src="../assets/img/btn_next.png" alt="" @click="next">
        </div>
    </div>
</template>

<script>
   import preLoadImg from '../mixins/preloadImg.js'
    export default {
        name:'rule',
        mixins:[preLoadImg],
        data(){
            return{

            }
        },
        methods:{
            next(){
                this.$store.dispatch('switchPage','drinkList')
            }
        },
        mounted(){
            this.preLoadImg()
        }
    }
</script>

<style scoped lang="scss">
    .rule {
        position: relative;
        width: 100%;
        height: 100%;
        background: url('../assets/img/rule.jpg') no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed;

        .rule_button {
            $width:32%;
            position: absolute;
            bottom:8%;
            left:50%;
            margin-left:-$width/2;
            margin-top:-20px;
            width: $width;
            height: 40px;

            img {
                width: 100%;
                height: 100%;
            }
            animation-iteration-count: infinite;
            animation-duration:2s;
        }
    }
</style>

